<template>
    <view class="container">
        <!-- 订单状态 -->
        <view class="tui-order-header">
            <view class="tui-header-content">
                <view class="tui-order-info">
                    <view class="tui-order-number">订单号：{{ orderDetail.no }}</view>
                    <view class="tui-order-time">下单时间：{{ formatOrderCreateTime(orderDetail.createTime) }}</view>
                </view>
                <view class="tui-order-status">
                    <view v-if="orderDetail.status === 0 && isOrderExpired(orderDetail)" class="tui-order-expired">
                        订单已过期
                    </view>
                    <view v-else-if="orderDetail.status === 0" class="tui-order-status-content">
                        <text>{{ getStatusText(orderDetail.status) }}</text>
                        <text v-if="getOrderRemainingTime(orderDetail) > 0" class="tui-order-countdown">
                            剩余：{{ formatOrderTime(getOrderRemainingTime(orderDetail)) }}
                        </text>
                    </view>
                    <view v-else>
                        {{ getStatusText(orderDetail.status) }}
                    </view>
                </view>
            </view>
        </view>

        <!-- 收货地址 -->
        <tui-list-cell unlined :hover="false">
            <view class="tui-flex-box">
                <image :src="webURL + 'img_order_address3x.png'" class="tui-icon-img"></image>
                <view class="tui-addr">
                    <view class="tui-addr-userinfo">{{ orderDetail.receiverName }}
                        <text class="tui-addr-tel">{{ orderDetail.receiverMobile }}</text>
                    </view>
                    <view class="tui-addr-text">{{ orderDetail.receiverAreaName }} {{ orderDetail.receiverDetailAddress
                        }}
                    </view>
                </view>
            </view>
        </tui-list-cell>

        <!-- 商品信息 -->
        <view class="tui-order-item">
            <tui-list-cell :hover="false" lineLeft="0">
                <view class="tui-goods-title">商品信息</view>
            </tui-list-cell>
            <block v-for="(item, index) in orderDetail.items" :key="index">
                <tui-list-cell padding="0">
                    <view class="tui-goods-item">
                        <image :src="item.picUrl" class="tui-goods-img"></image>
                        <view class="tui-goods-center">
                            <view class="tui-goods-name">{{ item.spuName }}</view>
                            <view class="tui-goods-attr">
                                <span v-for="property in item.properties" :key="property.propertyId">
                                    {{ property.propertyName }}: {{ property.valueName }}
                                </span>
                            </view>
                        </view>
                        <view class="tui-price-right">
                            <view>￥{{ fen2yuan(item.payPrice) }}</view>
                            <view>x{{ item.count }}</view>
                        </view>
                    </view>
                </tui-list-cell>
            </block>

            <!-- 订单金额信息 -->
            <view class="tui-goods-info">
                <view class="tui-price-flex tui-size24">
                    <view>商品总额</view>
                    <view>￥{{ fen2yuan(orderDetail.totalPrice) }}</view>
                </view>
                <view class="tui-price-flex tui-size24">
                    <view>优惠券</view>
                    <view>￥{{ fen2yuan(orderDetail.couponPrice) }}</view>
                </view>
                <view class="tui-price-flex tui-size24">
                    <view>配送费</view>
                    <view>￥{{ fen2yuan(orderDetail.deliveryPrice) }}</view>
                </view>
                <view class="tui-price-flex tui-size32 tui-pbtm20">
                    <view class="tui-flex-shrink">合计</view>
                    <view class="tui-goods-price">
                        <view class="tui-size-24">￥</view>
                        <view class="tui-price-large">{{ fen2yuan(orderDetail.payPrice) }}</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 订单信息 -->
        <view class="tui-order-info">
            <tui-list-cell :hover="false">
                <view class="tui-order-title">订单信息</view>
            </tui-list-cell>
            <view class="tui-order-content">
                <view class="tui-order-flex">
                    <view class="tui-item-title">订单号:</view>
                    <view class="tui-item-content">
                        {{ orderDetail.no }}
                        <view class="tui-copy-btn" @click="copyOrderNo(orderDetail.no)">
                            复制
                        </view>
                    </view>
                </view>
                <view class="tui-order-flex">
                    <view class="tui-item-title">创建时间:</view>
                    <view class="tui-item-content">{{ formatDate(orderDetail.createTime) }}</view>
                </view>
                <view class="tui-order-flex" v-if="orderDetail.payTime">
                    <view class="tui-item-title">付款时间:</view>
                    <view class="tui-item-content">{{ formatDate(orderDetail.payTime) }}</view>
                </view>
                <view class="tui-order-flex" v-if="orderDetail.deliveryTime">
                    <view class="tui-item-title">发货时间:</view>
                    <view class="tui-item-content">{{ formatDate(orderDetail.deliveryTime) }}</view>
                </view>
                <view class="tui-order-flex" v-if="orderDetail.receiveTime">
                    <view class="tui-item-title">收货时间:</view>
                    <view class="tui-item-content">{{ formatDate(orderDetail.receiveTime) }}</view>
                </view>
                <!-- 快递信息展示 -->
                <view class="tui-order-flex" v-if="orderDetail.status === 20 && orderDetail.logisticsName && orderDetail.logisticsNo">
                    <view class="tui-item-title">快递公司:</view>
                    <view class="tui-item-content">{{ orderDetail.logisticsName }}</view>
                </view>
                <view class="tui-order-flex" v-if="orderDetail.status === 20 && orderDetail.logisticsNo">
                    <view class="tui-item-title">快递单号:</view>
                    <view class="tui-item-content">
                        {{ orderDetail.logisticsNo }}
                        <view class="tui-copy-btn" @click="copyLogisticsNo">
                            复制
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="tui-order-actions">
            <view class="tui-action-buttons">
                <template v-if="orderDetail.status === 0">
                    <!-- 待付款操作 -->
                    <view class="tui-btn-ml">
                        <tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="cancelOrder(orderDetail.id)">取消订单</tui-button>
                    </view>
                    <view class="tui-btn-ml" v-if="!isOrderExpired(orderDetail)">
                        <tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="continuePayment(orderDetail)">继续支付</tui-button>
                    </view>
                </template>
                <template v-else-if="orderDetail.status === 20">
                    <!-- 已发货操作 -->
                    <view class="tui-btn-ml">
                        <tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="logistics(orderDetail.id)">查看物流</tui-button>
                    </view>
                    <view class="tui-btn-ml">
                        <tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="confirmOrder(orderDetail.id)">确认收货</tui-button>
                    </view>
                </template>
                <template v-else-if="orderDetail.status === 30">
                    <!-- 已完成操作 -->
                    <view class="tui-btn-ml">
                        <tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="addEvaluate(orderDetail.id)">评价晒单</tui-button>
                    </view>
                    <view class="tui-btn-ml">
                        <tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="repurchase(orderDetail.id)">再次购买</tui-button>
                    </view>
                </template>
                <template v-else-if="[40, 50, 60].includes(orderDetail.status)">
                    <!-- 已取消/已退款/退款中操作 -->
                    <view class="tui-btn-ml">
                        <tui-button type="black" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="deleteOrder(orderDetail.id)">删除订单</tui-button>
                    </view>
                    <view class="tui-btn-ml">
                        <tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                            @click="repurchase(orderDetail.id)">再次购买</tui-button>
                    </view>
                </template>
                <!-- 联系客服按钮 -->
                <view class="tui-btn-ml">
                    <tui-button type="danger" plain width="152rpx" height="56rpx" :size="26" shape="circle"
                        @click="contactService">联系客服</tui-button>
                </view>
            </view>
        </view>
        
        <!-- 支付弹窗组件 -->
        <t-pay-way :show="show" :sub-order="subOrderInfo" :order-info="priceInfo" @close="popupClose"
            :balance="userBalance" @confirm="handleConfirmPayment"></t-pay-way>
    </view>
</template>


<script>
    import tPayWay from "../components/views/t-pay-way/t-pay-way"
    export default {
        components: {
            tPayWay
        },
        data() {
            return {
                webURL: "https://www.thorui.cn/wx/static/images/mall/order/",
                //1-待付款 2-付款成功 3-待收货 4-订单已完成 5-交易关闭
                status: 1,
                show: false,
                orderDetail: {}, // 订单详情数据
                subOrderInfo: null, // 当前子订单信息
                priceInfo: {}, // 当前订单支付信息
                userBalance: 0, // 用户余额
                checkTimer: null, // 订单过期检查定时器
            }
        },
        onLoad(options) {
            if (options.id) {
                this.fetchOrderDetail(options.id);
                this.startOrderExpiredCheck();
            }
        },
        onUnload() {
            this.stopOrderExpiredCheck();
        },
        onHide() {
            this.stopOrderExpiredCheck();
        },
        onShow() {
            this.startOrderExpiredCheck();
        },
        methods: {
            // 分转元函数，参考 yudao-mall
            fen2yuan(price) {
                return (Number(price) / 100).toFixed(2);
            },
            // 获取订单详情
            fetchOrderDetail(id) {
                this.$api
                    .req(`/trade/order/get-detail`,{ id },"GET")
                    .then((res) => {
                        if (res.code === 0) {
                            this.orderDetail = res.data;
                            this.status = res.data.status; // 更新状态
                        } else {
                            uni.showToast({
                                title: res.msg || "加载失败",
                                icon: "none"
                            });
                        }
                    })
                    .catch(() => {
                        uni.showToast({
                            title: "加载失败，请重试",
                            icon: "none"
                        });
                    });
            },
            formatDate(timestamp) {
                if (!timestamp) return "";
                const date = new Date(timestamp);
                const Y = date.getFullYear();
                const M = (date.getMonth() + 1).toString().padStart(2,"0");
                const D = date.getDate().toString().padStart(2,"0");
                const h = date.getHours().toString().padStart(2,"0");
                const m = date.getMinutes().toString().padStart(2,"0");
                const s = date.getSeconds().toString().padStart(2,"0");
                return `${Y}-${M}-${D} ${h}:${m}:${s}`;
            },
            getImg: function (status) {
                return this.webURL + ["img_order_payment3x.png","img_order_send3x.png","img_order_received3x.png",
                    "img_order_signed3x.png","img_order_closed3x.png"
                ][status - 1]
            },
            // 获取状态对应的文本
            getStatusText(status) {
                const statusMap = {
                    0: "待支付",
                    10: "待发货",
                    20: "已发货",
                    30: "已完成",
                    40: "已取消",
                    50: "已退款",
                    60: "退款中"
                };
                return statusMap[status] || "未知状态";
            },
            // 获取状态对应的原因
            getReason(status) {
                const reasonMap = {
                    0: "请在规定时间内完成付款",
                    10: "等待商家发货",
                    20: "包裹正在配送中",
                    30: "等待您的评价",
                    40: "订单已被删除"
                };
                return reasonMap[status] || "";
            },
            switchStatus() {
                let status = this.status + 1
                this.status = status > 5 ? 1 : status
                this.tui.toast("状态切换成功")
            },
            logistics() {
                // 跳转到物流查询页面
                uni.navigateTo({
                    url: `../logistics/logistics?orderId=${this.orderDetail.id}`,
                    fail: () => {
                        uni.showToast({
                            title: "物流查询功能暂不可用",
                            icon: "none"
                        });
                    }
                });
            },
            btnPay() {
                this.show = true
            },
            popupClose() {
                this.show = false
            },
            refund() {
                this.f.nav("../refund/refund")
            },
            // 格式化订单创建时间（年月日时分秒）
            formatOrderCreateTime(timestamp) {
                if (!timestamp) return '';
                
                const date = new Date(timestamp);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            // 格式化订单时间显示（倒计时）
            formatOrderTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
            },
            // 判断订单是否已过期（超过15分钟）
            isOrderExpired(order) {
                if (!order.createTime) return false;
                
                const now = new Date().getTime();
                const orderCreateTime = order.createTime;
                const elapsed = Math.floor((now - orderCreateTime) / 1000);
                const validTime = 15 * 60; // 15分钟有效期
                
                return elapsed >= validTime;
            },
            // 计算订单剩余时间
            getOrderRemainingTime(order) {
                if (!order.createTime) return 0;
                
                const now = new Date().getTime();
                const orderCreateTime = order.createTime;
                const elapsed = Math.floor((now - orderCreateTime) / 1000);
                const validTime = 15 * 60; // 15分钟有效期
                const remaining = validTime - elapsed;
                
                return Math.max(0, remaining);
            },
            // 取消订单
            cancelOrder(id) {
                uni.showModal({
                    title: "确认取消",
                    content: "您确定要取消订单吗？",
                    success: (res) => {
                        if (res.confirm) {
                            this.performCancelOrder(id);
                        }
                    }
                });
            },
            // 执行取消订单
            performCancelOrder(id) {
                this.$api
                    .req(`/trade/order/cancel?id=${id}`, {}, 'DELETE')
                    .then((res) => {
                        if (res.code === 0) {
                            uni.showToast({
                                title: "订单已取消",
                                icon: "none"
                            });
                            this.fetchOrderDetail(id);
                        } else {
                            uni.showToast({
                                title: res.msg || "取消失败",
                                icon: "none"
                            });
                        }
                    })
                    .catch(() => {
                        uni.showToast({
                            title: "取消失败，请重试",
                            icon: "none"
                        });
                    });
            },
            // 继续支付
            continuePayment(order) {
                this.subOrderInfo = order;
                this.priceInfo = {
                    payPrice: order.payPrice,
                    orderId: order.id,
                };
                this.show = true;
            },
            // 关闭支付弹窗
            popupClose() {
                this.show = false;
            },
            // 支付确认事件
            handleConfirmPayment({ payMethod }) {
                uni.showToast({
                    title: `选择了支付方式：${payMethod}`,
                    icon: "none"
                });
                this.show = false;
            },
            // 确认收货
            confirmOrder(id) {
                uni.showModal({
                    title: "确认收货",
                    content: "请确认您已收到商品",
                    success: (res) => {
                        if (res.confirm) {
                            this.$api
                                .req(`/trade/order/receive?id=${id}`, {}, 'PUT')
                                .then((res) => {
                                    if (res.code === 0) {
                                        uni.showToast({
                                            title: "确认收货成功",
                                            icon: "success"
                                        });
                                        this.fetchOrderDetail(id);
                                    } else {
                                        uni.showToast({
                                            title: res.msg || "确认失败",
                                            icon: "none"
                                        });
                                    }
                                })
                                .catch(() => {
                                    uni.showToast({
                                        title: "确认失败，请重试",
                                        icon: "none"
                                    });
                                });
                        }
                    }
                });
            },
            // 评价订单
            addEvaluate(id) {
                uni.navigateTo({
                    url: `../addEvaluate/addEvaluate?orderId=${id}`
                });
            },
            // 删除订单
            deleteOrder(id) {
                uni.showModal({
                    title: "确认删除",
                    content: "您确定要删除订单吗？",
                    success: (res) => {
                        if (res.confirm) {
                            this.$api
                                .req(`/trade/order/delete?id=${id}`, {}, 'DELETE')
                                .then((res) => {
                                    if (res.code === 0) {
                                        uni.showToast({
                                            title: "订单已删除",
                                            icon: "none"
                                        });
                                        uni.navigateBack();
                                    } else {
                                        uni.showToast({
                                            title: res.msg || "删除失败",
                                            icon: "none"
                                        });
                                    }
                                })
                                .catch(() => {
                                    uni.showToast({
                                        title: "删除失败，请重试",
                                        icon: "none"
                                    });
                                });
                        }
                    }
                });
            },
            // 再次购买
            repurchase(id) {
                uni.showToast({
                    title: "再次购买功能待开发",
                    icon: "none"
                });
            },
            // 启动订单过期检查定时器
            startOrderExpiredCheck() {
                // 每1秒更新一次倒计时显示
                this.checkTimer = setInterval(() => {
                    // 强制更新视图以刷新倒计时显示
                    this.$forceUpdate();
                }, 1000);
            },
            // 停止订单过期检查定时器
            stopOrderExpiredCheck() {
                if (this.checkTimer) {
                    clearInterval(this.checkTimer);
                    this.checkTimer = null;
                }
            },
            // 复制快递单号
            copyLogisticsNo() {
                if (!this.orderDetail.logisticsNo) return;
                
                uni.setClipboardData({
                    data: this.orderDetail.logisticsNo,
                    success: () => {
                        uni.showToast({
                            title: '快递单号已复制',
                            icon: 'success'
                        });
                    },
                    fail: () => {
                        uni.showToast({
                            title: '复制失败',
                            icon: 'none'
                        });
                    }
                });
            },
            // 复制订单号
            copyOrderNo(orderNo) {
                if (!orderNo) return;
                
                uni.setClipboardData({
                    data: orderNo,
                    success: () => {
                        uni.showToast({
                            title: '订单号已复制',
                            icon: 'success'
                        });
                    },
                    fail: () => {
                        uni.showToast({
                            title: '复制失败',
                            icon: 'none'
                        });
                    }
                });
            },
            // 联系客服
            contactService() {
                // 组装首条消息，带上订单信息
                const orderNo = this.orderDetail.no || '';
                const preset = encodeURIComponent(
                    `订单咨询：订单号${orderNo}`
                );
                const avatar = encodeURIComponent('/static/img/tabs/my.png');
                const userName = encodeURIComponent('客服');
                
                // 跳转到聊天页面，并携带预置消息
                uni.navigateTo({
                    url: `/subPackage2/chat/chat?preset=${preset}&userName=${userName}&userAvatar=${avatar}&type=order&orderNo=${orderNo}`,
                    fail: () => {
                        uni.showToast({
                            title: "聊天功能暂不可用",
                            icon: "none"
                        });
                    }
                });
            }
        }
    }
</script>

<style>
    .container {
        padding-bottom: 118rpx;
    }

    .tui-order-header {
        width: 100%;
        height: 160rpx;
        position: relative;
        background-color: #EB0909;
    }

    .tui-img-bg {
        width: 100%;
        height: 160rpx;
    }

    .tui-header-content {
        width: 100%;
        height: 160rpx;
        position: absolute;
        z-index: 10;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 70rpx;
        box-sizing: border-box;
    }

    .tui-status-text {
        font-size: 34rpx;
        line-height: 34rpx;
        color: #FEFEFE;
    }

    .tui-reason {
        font-size: 24rpx;
        line-height: 24rpx;
        color: rgba(254, 254, 254, 0.75);
        padding-top: 15rpx;
        display: flex;
        align-items: center;
    }

    .tui-reason-text {
        padding-right: 12rpx;
    }

    .tui-status-img {
        width: 80rpx;
        height: 80rpx;
        display: block;
    }

    .tui-flex-box {
        width: 100%;
        display: flex;
        align-items: center;
    }

    .tui-icon-img {
        width: 44rpx;
        height: 44rpx;
        flex-shrink: 0;
    }

    .tui-logistics {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 24rpx 0 20rpx;
        box-sizing: border-box;
    }

    .tui-logistics-text {
        font-size: 26rpx;
        line-height: 32rpx;
    }

    .tui-logistics-time {
        font-size: 24rpx;
        line-height: 24rpx;
        padding-top: 16rpx;
        color: #666
    }

    .tui-addr {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 20rpx;
        box-sizing: border-box;
    }

    .tui-addr-userinfo {
        font-size: 30rpx;
        line-height: 30rpx;
        font-weight: bold;
    }

    .tui-addr-text {
        font-size: 24rpx;
        line-height: 32rpx;
        padding-top: 16rpx;
    }

    .tui-addr-tel {
        padding-left: 40rpx;
    }

    .tui-order-item {
        margin-top: 20rpx;
        border-radius: 10rpx;
        overflow: hidden;
    }

    .tui-goods-title {
        width: 100%;
        font-size: 28rpx;
        line-height: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


    .tui-goods-item {
        width: 100%;
        padding: 20rpx 30rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
    }

    .tui-goods-img {
        width: 180rpx;
        height: 180rpx;
        display: block;
        flex-shrink: 0;
    }

    .tui-goods-center {
        flex: 1;
        padding: 20rpx 8rpx;
        box-sizing: border-box;
    }

    .tui-goods-name {
        max-width: 310rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: 26rpx;
        line-height: 32rpx;
    }

    .tui-goods-attr {
        font-size: 22rpx;
        color: #888888;
        line-height: 32rpx;
        padding-top: 20rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .tui-price-right {
        text-align: right;
        font-size: 24rpx;
        color: #888888;
        line-height: 30rpx;
        padding-top: 20rpx;
    }

    .tui-color-red {
        color: #E41F19;
        padding-right: 30rpx;
    }

    .tui-goods-price {
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        font-size: 24rpx;
    }

    .tui-size-24 {
        font-size: 24rpx;
        line-height: 24rpx;
    }

    .tui-price-large {
        font-size: 32rpx;
        line-height: 30rpx;
    }

    .tui-goods-info {
        width: 100%;
        padding: 30rpx;
        box-sizing: border-box;
        background: #fff;
    }

    .tui-price-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .tui-size24 {
        padding-bottom: 20rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        color: #888;
    }

    .tui-size32 {
        font-size: 32rpx;
        line-height: 32rpx;
        font-weight: 500;
    }

    .tui-pbtm20 {
        padding-bottom: 20rpx;
    }

    .tui-flex-shrink {
        flex-shrink: 0;
    }

    .tui-primary-color {
        color: #EB0909;
    }

    .tui-order-info {
        margin-top: 20rpx;
    }

    .tui-order-title {
        position: relative;
        font-size: 28rpx;
        line-height: 28rpx;
        padding-left: 12rpx;
        box-sizing: border-box;
    }

    .tui-order-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        border-left: 4rpx solid #EB0909;
        height: 100%;
    }

    .tui-order-content {
        width: 100%;
        padding: 24rpx 30rpx;
        box-sizing: border-box;
        background: #fff;
        font-size: 24rpx;
        line-height: 30rpx;
    }

    .tui-order-flex {
        display: flex;
        padding-top: 18rpx;
    }

    .tui-order-flex:first-child {
        padding-top: 0
    }

    .tui-item-title {
        width: 132rpx;
        flex-shrink: 0;
    }

    .tui-item-content {
        color: #666;
        line-height: 32rpx;
        display: flex;
        align-items: center;
        gap: 12rpx;
    }
    
    .tui-copy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 12rpx;
        background: #ffffff;
        border-radius: 20rpx;
        border: 1rpx solid #E41F19;
        width: 75rpx;
        height: 40rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #E41F19;
        padding: 0;
        box-sizing: border-box;
    }
    
    .tui-copy-btn:active {
        opacity: 0.7;
        background: #f5f5f5;
    }

    .tui-safe-area {
        height: 1rpx;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .tui-tabbar {
        width: 100%;
        height: 98rpx;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 26rpx;
        box-shadow: 0 0 1px rgba(0, 0, 0, .3);
        padding-bottom: env(safe-area-inset-bottom);
        z-index: 996;
    }

    .tui-btn-mr {
        margin-right: 30rpx;
    }

    .tui-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
    }

    .tui-contact image {
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
    }
    
    /* 订单状态样式 */
    .tui-order-info {
        display: flex;
        flex-direction: column;
        gap: 4rpx;
    }
    
    .tui-order-number {
        font-size: 28rpx;
        color: #FEFEFE;
        font-weight: 500;
    }
    
    .tui-order-time {
        font-size: 24rpx;
        color: rgba(254, 254, 254, 0.75);
    }
    
    .tui-order-status {
        color: #FEFEFE;
        font-size: 26rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }
    
    .tui-order-status-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8rpx;
    }
    
    .tui-order-countdown {
        font-size: 22rpx;
        color: #ffeb3b;
        padding: 2rpx 8rpx;
        background: rgba(255, 235, 59, 0.2);
        border-radius: 8rpx;
        border: 1rpx solid rgba(255, 235, 59, 0.5);
        font-weight: 500;
    }
    
    .tui-order-expired {
        font-size: 22rpx;
        color: rgba(254, 254, 254, 0.6);
        padding: 2rpx 8rpx;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 8rpx;
        border: 1rpx solid rgba(0, 0, 0, 0.3);
        font-weight: 500;
    }
    
    /* 操作按钮样式 */
    .tui-order-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 20rpx 30rpx;
        padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
        z-index: 999;
    }
    
    .tui-action-buttons {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20rpx;
    }
    
    .tui-btn-ml {
        margin-left: 0;
    }
    
</style>